<template>
    <div>
      <h1 class="header">test2</h1>
      <Child class="con"></Child>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "Test2",
  });
  </script>
  
  <script setup lang="ts">
  import Child from "./Child.vue";
  </script>
  
  <!-- 
    scoped作用域的原理:
      - 在当前的组件内所有的元素上都添加了一个 data-v-xxxxx的自定义属性
      - 如果内部的元素有组件,则把当前的自定义属性添加到这个组件的根元素上(也就是说根元素上可能有两个以上的自定义属性标识)
      - 当我们在scoped区域定义样式的时候,解析时,会在所有的选择器后添加一个属性过滤选择器
      - 经过以上的过程,scoped中的样式只能作用在当前组件的元素上或者子组件的根元素上
  
    解决方案:
      - 把子组件的样式写在外部
      - 把操作子组件的选择器写在 深度作用选择器中(v2 ::deep xxx   v3: :deep(xxxx))
   -->
  <style scoped lang="scss">
  .header {
    background: pink;
    color: aquamarine;
  }
  
  /* ::deep h2 {
    background-color: red;
  } */
  
  //原理是直接从当前组件标识的属性选择器 下进行直接后代选择  [data-v-xxxx] h2{}
  :deep(h2) {
    background-color: rgb(0, 217, 255);
  }
  
  //为什么不起作用呢? .con[data-v-11555221] h2[data-v-11555221]{}
  </style>
  
  <style>
  /* .con h2 {
    background-color: red;
  } */
  </style>
  